<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code URLs</title>
    <style>
        .url-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        .url-label {
            font-size: 18px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 80%;
            max-width: 600px;
            text-align: center;
            text-decoration: none;
            color: #007BFF;
            cursor: pointer;
        }
        .url-label:hover {
            background-color: #f0f0f0;
        }
        .instruction {
            font-size: 20px;
            margin: 20px 0;
            color: #333;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="url-container" id="url-container">
    <div class="instruction" onclick="fetchQrUrls()">点我生成同心汇登录二维码连接</div>
    <!-- These will be dynamically populated by JavaScript -->
    登录连接1：<a class="url-label" id="url1" target="_blank"></a>
    登录连接1：<a class="url-label" id="url2" target="_blank"></a>
    登录连接1：<a class="url-label" id="url3" target="_blank"></a>
    登录连接1：<a class="url-label" id="url4" target="_blank"></a>
</div>

<script>
    async function fetchQrUrls() {
        try {
            const response = await fetch('/wechat/getQrUrls');
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            const urls = await response.json();

            if (!Array.isArray(urls) || urls.length !== 4) {
                throw new Error('Expected an array of 4 URLs, but received ' + urls.length);
            }

            const urlIds = ['url1', 'url2', 'url3', 'url4'];

            urls.forEach((url, index) => {
                const link = document.getElementById(urlIds[index]);
                if (link) {
                    link.href = url;
                    link.textContent = url;
                } else {
                    console.error(`Element with id ${urlIds[index]} not found.`);
                }
            });
        } catch (error) {
            console.error('Error fetching QR URLs:', error);
        }
    }

    // Initially call fetchQrUrls on page load or you can remove this line if you want users to trigger it manually
    // fetchQrUrls();
</script>
</body>
</html>